<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>I would like to say: </p>
		<table border="" cellspacing="" cellpadding="">
			<thead></thead>
			<tbody></tbody>
		</table>
		<button type="button">清空表格</button>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("p").append("<b>Hello</b>");
				drawHead();
				
				$("button").click(function() {
					$("table").empty();
				});
			});
			
			function drawHead() {
				let titles = ["序号", "书籍名称", "出版日期", "价格", "购买数量", "操作"];
				let tr = "<tr>";
				for(let item of titles) {
					tr += "<th>"
					tr += item
					tr += "</th>"
				}
				tr += "</tr>";
				
				$("table>thead").append(tr);
			}
		</script>
	</body>
</html>
